<template>
	<div class="node-wrap">
		<div class="node-wrap-box node-end" >
      <span>{{ nodeConfig.nodeName }}</span>
      <i class="close el-icon-close" v-if="!disabled" @click.stop="delNode()"></i>
		</div>
    <add-node :parentNodeId="nodeConfig.nodeId" v-model="nodeConfig.childNode" :disabled="true"></add-node>
    <el-drawer title="结束" :visible.sync="drawer" destroy-on-close append-to-body :size="500">
    	<template #title>
    		<div class="node-wrap-drawer__title">
    			<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit"></i></label>
    			<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
    		</div>
    	</template>
    	<el-container>
    		<el-main style="padding:0 20px 20px 20px">
    			<el-form label-position="top">
            <el-form-item label="节点描述">
            	<el-input v-model="form.nodeDescription" placeholder="请输入节点描述"></el-input>
            </el-form-item>
    			</el-form>
    		</el-main>
    		<el-footer>
    			<el-button type="primary" @click="save">保存</el-button>
    			<el-button @click="cancel">取消</el-button>
    		</el-footer>
    	</el-container>
    </el-drawer>
	</div>
</template>

<script>
  import addNode from './addNode.vue'
	export default {
		props: {
			value: { type: Object, default: () => {} },
      disabled: {
        type: Boolean,
        default: false
      }
		},
    components: {
    	addNode
    },
		data() {
			return {
        nodeConfig: {},
        drawer: false,
        isEditTitle: false,
        form: {}
			}
		},
		watch:{
			value(val){
				this.nodeConfig = val
			}
		},
		mounted() {
			this.nodeConfig = this.value
		},
		methods: {
      delNode(){
      	this.$emit("input", this.nodeConfig.childNode)
      },
      show(){
        if (this.disabled) return
      	this.form = {}
      	this.form = JSON.parse(JSON.stringify(this.nodeConfig))
      	this.isEditTitle = false
      	this.drawer = true
      },
      editTitle(){
      	this.isEditTitle = true
      	this.$nextTick(()=>{
      		this.$refs.nodeTitle.focus()
      	})
      },
      saveTitle(){
      	this.isEditTitle = false
      },
      save(){
      	this.$emit("input", this.form)
      	this.drawer = false
      },
      cancel () {
        this.drawer = false
      },
		}
	}
</script>
